<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>css3动画垂直导航菜单</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            margin: 0;
            font-weight: normal;
        }

        div#nav_menu {
            width: 500px;
            height: auto;
            margin: 200px auto;
        }

        div#nav_menu ul li {
            width: 100%;
            height: 100px;
            border-left: 10px solid #000;
            box-shadow: 1px 2px 3px #666;
            margin-top: 5px;
            box-sizing: border-box;
            transition: all .3s linear;

        }

        div#nav_menu ul li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        div#nav_menu ul li a div {
            float: left;
            height: 100%;
            box-sizing: border-box;
        }

        div#nav_menu ul li a div.left {
            width: 100px;
            line-height: 100px;
            text-align: center;

        }

        div#nav_menu ul li a div.left span {
            color: #000;
            font-size: 25px;
        }

        div#nav_menu ul li a div.right {
            width: 386px;
            padding: 20px 30px 20px 0;
        }

        div#nav_menu ul li a div.right h3 {
            color: #000;
            transition: all .3s linear;
        }

        div#nav_menu ul li a div.right p {
            color: #666;
            font-size: 14px;
            margin: 7px;
            transition: all .3s linear;
        }

        div#nav_menu ul li:hover {
            border-color: #fbd04f;
            background-color: #000;
        }

        div#nav_menu ul li:hover a div.left span.fa {
            color: #fbd04f;
            transform: scale(2);
        }

        div#nav_menu ul li:hover a div.right h3 {
            font-size: 14px;
            color: #fff;
        }

        div#nav_menu ul li:hover a div.right p {
            font-size: 20px;
            color: #fbd04f;
        }
    </style>
</head>

<body>
    <div id="nav_menu">
        <ul>
            <li>
                <a href="">
                    <div class="left">
                        <span class=" fa fa-address-card"></span>
                    </div>
                    <div class="right">
                        <h3>大地飞歌规划</h3>
                        <p>打开健康快乐</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="left">
                        <span class=" fa fa-binoculars"></span>
                    </div>
                    <div class="right">
                        <h3>克格勃你看你帮忙弄弄不急不急</h3>
                        <p>法国发过给给苟富贵</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="left">
                        <span class=" fa fa-flag"></span>
                    </div>
                    <div class="right">
                        <h3>刚刚绘画风格共和国韩国</h3>
                        <p>湖广会馆回家后非官方</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="left">
                        <span class=" fa fa-graduation-cap"></span>
                    </div>
                    <div class="right">
                        <h3>规划规范化风格化</h3>
                        <p>v复古风格哈哈</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="left">
                        <span class=" fa fa-gift"></span>
                    </div>
                    <div class="right">
                        <h3>国韩国湖</h3>
                        <p>共和国和国际化规划和</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>